<template>
  <j-modal :confirmLoading="confirmLoading" :title="title" :visible="visible" :width="1236" cancelText="关闭"
           switchFullscreen @cancel="handleCancel" @ok="handleOk">
    <template slot="footer">
      <a-button @click="handleCancel">取消</a-button>
      <a-button v-if="title=='审批'" :loading="confirmLoading" type="primary" @click="handleOk(3)">
        通过
      </a-button>
      <a-button :loading="confirmLoading"  v-print="'#bigBox'" type="primary">
        打印
      </a-button>
    </template>

    <div id="bigBox" class="big-box">
      <h1 style="text-align: center;padding: 12px;border-bottom: 1px solid #000;margin-bottom: 0">产品需求订单</h1>
      <div class="head-box" style="display: flex;text-align: center">
        <div class="width-230 border-right font-weight-600">业务人员</div>
        <div class="width-230 border-right">{{ model.createName }}</div>
        <div class="width-130 border-right font-weight-600">部门</div>
        <div class="width-150 border-right">{{ model.orgName }}</div>
        <div class="width-130 border-right font-weight-600">下单时间</div>
        <div class="width-150 border-right">{{ model.createTime.substring(0,10) }}</div>
        <div class="width-130 border-right font-weight-600">到货日期</div>
        <div class="width-150"></div>
      </div>
      <div class="head-box" style="display: flex;text-align: center">
        <div class="width-230 border-right font-weight-600">经销商名称(必填)</div>
        <div class="width-230 border-right">{{ model.customerName }}</div>
        <div class="width-130 border-right font-weight-600">联系电话</div>
        <div class="width-150 ">{{ model.consigneeTelephone }}</div>
      </div>
      <div class="head-box" style="display: flex;text-align: center">
        <div class="width-39 border-right font-weight-600">序号</div>
        <div class="width-180 border-right font-weight-600">产品编号</div>
        <div class="width-230 border-right font-weight-600">产品名称</div>
        <div class="width-130 border-right font-weight-600">单位</div>
        <div class="width-150 border-right font-weight-600">数量</div>
        <div class="width-130 border-right font-weight-600">单价(元)</div>
        <div class="width-150 border-right font-weight-600">货款合计</div>
        <div class="width-280 font-weight-600">备注</div>
      </div>
      <div class="head-box" v-for="(item,index) in model.itemVos"  style="display: flex;">
        <div class="width-39 border-right font-weight-600">{{index+1}}</div>
        <div class="width-180 border-right">{{ item.goodsCode||'' }}</div>
        <div class="width-230 border-right">{{ item.goodsName||'' }}</div>
        <div class="width-130 border-right text-center">{{ item.basicUnit||'' }}</div>
        <div class="width-150 border-right text-right">{{ item.quantity||'' }}</div>
        <div class="width-130 border-right text-right">{{item.unitPrice||''}}</div>
        <div class="width-150 border-right text-right">{{item.amount||0}}</div>
        <div class="width-280"></div>
      </div>
      <template>
        <div class="head-box" style="display: flex;text-align: center">
          <div class="width-230 border-right font-weight-600">烟杆合计</div>
          <div class="width-360 border-right">0</div>
          <div class="width-280 border-right font-weight-600">烟弹合计</div>
          <div class="">0</div>
        </div>
      </template>
      <div class="head-box" style="display: flex;text-align: center">
        <div class="width-230 border-right font-weight-600">合计拿货金额</div>
        <div style="flex: 1">{{ model.countMoney }}</div>
      </div>
      <div class="bottom-box" style="display: flex;text-align: center">
        <div class="width-230 border-right font-weight-600">收货人</div>
        <div class="width-230 border-right">{{ model.consignee }}</div>
        <div class="width-130 border-right font-weight-600">收货人联系方式</div>
        <div class="width-280 border-right">{{ model.consigneeTelephone }}</div>
        <div class="width-150 border-right font-weight-600">提货方式</div>
        <div class="width-280 ">月结</div>
      </div>
      <div class="bottom-box" style="display: flex;text-align: center">
        <div class="width-230 border-right font-weight-600">收货地址</div>
        <div style="flex: 1">{{ model.receivingAddress }}</div>
      </div>
      <div class="bottom-box" style="display: flex;text-align: center">
        <div class="width-230 border-right font-weight-600">主管确认</div>
        <div class="width-360 border-right"></div>
        <div class="width-280 border-right font-weight-600">财务确认</div>
        <div class=""></div>
      </div>
      <div class="bottom-box-last" style="display: flex;text-align: center">
        <div class="width-230 border-right font-weight-600">备注说明</div>
        <div style="flex: 1"></div>
      </div>

    </div>
  </j-modal>
</template>

<script>
import {
  httpAction,
  postAction
} from '@/api/manage'

export default {
  name: 'SfaSignConfigModal',
  components: {

  },
  data() {
    return {
      title: '操作',
      visible: true,
      model: {},
      confirmLoading: false,
      url: {
        add: window._CONFIG['domianSfaURL'] + '/visit/sfaVisitLineController/saveOrUpdate',
      }
    }
  },
  methods: {
    add() {
      this.edit({})
    },
    edit(record, id) {
      this.model = Object.assign({}, record)
      this.visible = true
    },

    close() {
      this.$emit('close')
      this.form = this.$form.createForm(this)
      this.visible = false
      this.remarks = ''
    },

    handleOk2() {
      let formData = {
        approvalRemarks: this.remarks,
        id: this.model.id
      }
      console.log(formData)
      this.confirmLoading = true
      let that = this
      httpAction(this.url.addDetail, formData, 'post').then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.$emit('ok')
          that.close()
        } else {
          that.$message.warning(res.message)
        }
      }).finally(() => {
        that.confirmLoading = false
      })
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>

<style lang="less" scoped>
.width-39{
  width: 49px;
}
.width-130{
  width: 120px;
}
.width-150{
  width: 140px;
}
.width-180{
  width: 160px;
}
.width-230{
  width: 209px;
}
.width-280{
  width: 260px;
}
.width-360{
  width: 329px;
}
.font-weight-600{
  font-weight: 600;
}
.border-right{
  border-right: 1px solid #000;
}
.text-right{
  text-align: right;
}
.text-center{
  text-align: right;
}
.big-box {
  margin: 0 auto;
  border: 1px solid #000;
  //height: 500px;
  width: 1200px;
}
.head-box{
  height: 36px;
  line-height: 36px;
  border-bottom: 1px solid #000;
  div{
    padding: 0 4px;
  }
}
.bottom-box{
  height: 72px;
  line-height: 72px;
  border-bottom: 1px solid #000;
  div{
    padding: 0 4px;
  }
}
.bottom-box-last{
  height: 72px;
  line-height: 72px;
  div{
    padding: 0 4px;
  }
}
</style>
